<template>
  <div class="w-full pb-80px text-14px" v-if="list.length > 0">
    <van-tabs v-model:active="activeName" sticky @change="handleItemChange">
      <van-tab v-for="item in tabsList" :title="item.name">
        <div
          class="pt-20px pl-20px pr-20px pb-20px bg-white mb-20px"
          v-for="items in list"
        >
          <div
            class="pb-10px border-b flex justify-between text-14px items-center"
          >
            <div class="text-[#999999]">订单号：{{ items.order_no }}</div>
            <div class="text-[#F9363C]">
              <span v-show="items.state == 1">待付款</span>
              <span v-show="items.state == 2">已打款</span>
              <span v-show="items.state == 3">失败</span>
            </div>
          </div>
          <div>
            <div class="mt-20px">提现金额：{{ items.money }}</div>
            <div class="mt-20px">手机号：{{ items.mobile }}</div>
            <div class="mt-20px">姓名：{{ items.name }}</div>
            <div class="mt-20px">
              提现方式：
              <span v-show="items.type == 1">WX</span>
              <span v-show="items.type == 2">ZFB</span>
              <span v-show="items.type == 3">YHK</span>
            </div>
            <div
              class="mt-20px w-full flex justify-between items-center"
              v-show="items.manage_no"
            >
              <div>审核人ID：{{ items.manage_no }}</div>
              <div
                @click="copy(items.manage_no)"
                class="w-66px h-26px flex justify-center items-center bg-[#2E95FF] rounded-5px text-white text-12px"
              >
                复制信息
              </div>
            </div>
            <div class="mt-20px">提现时间：{{ items.create_time }}</div>
            <div class="mt-20px" v-show="items.update_time">
              审核时间：{{ items.update_time }}
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <div v-else class="mt-200px">
    <nodata></nodata>
  </div>
  <pagination
    @back="back"
    @next="next"
    :current_page="current_page"
    :last_page="last_page"
    :per_page="per_page"
    :total="total"
  ></pagination>
</template>
<script setup>
import pagination from "@/components/pagination.vue";
import { cashList } from "@/util/api";
import nodata from "@/components/nodata.vue";
import { showToast } from "vant";
import h5Copy from "@/util/junyi-h5-copy";
const activeName = ref("0");

const tabsList = ref([
  {
    name: "全部",
  },
  {
    name: "待转账",
  },
  {
    name: "已打款",
  },
  {
    name: "失败",
  },
]);
const list = ref([]);
const current_page = ref(0);
const last_page = ref(0);
const per_page = ref(0);
const total = ref(0);
const param = reactive({
  page: 1,
  state: 0,
});
const getDate = async () => {
  const res = await cashList(param);
  current_page.value = res.msg.current_page;
  last_page.value = res.msg.last_page;
  per_page.value = res.msg.per_page;
  total.value = res.msg.total;
  list.value = res.msg.data;
  //  console.log(res);
};
getDate();
const handleItemChange = (v) => {
  activeName.value = v;
  param.page == 1;
  param.state = v;
  getDate();
};

const back = () => {
  param.page--;
  getDate();
};
const next = () => {
  param.page++;
  getDate();
};
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
</script>
<style scoped lang="scss"></style>
